<template>
    <view>
        <!-- 收货地址 -->
        <view class="revice_address_row">
            <!-- 当收货地址不存在的时候  详细信息显示 -->
            <view class="user_info_row">
                <view class="user_info">
                    <view>{{ address.userName }}</view>
                    <view>{{ address.all }}</view>
                </view>
                <view class="user_phone">{{ address.telNumber }}</view>
            </view>
        </view>

        <!-- 购物车内容 -->
        <view class="cart_content">
            <view class="cart_title">购物车</view>
            <view class="cart_main">
                <view class="cart_item" v-for="(item, index) in cart" :key="item.goods_id">
                    <!-- 商品图片 -->

                    <navigator class="cart_img_wrap">
                        <image class="" :src="item.goods_small_logo" mode="widthFix"></image>
                    </navigator>

                    <!-- 商品信息 -->

                    <view class="cart_info_wrap">
                        <view class="goods_name">{{ item.goods_name }}</view>
                        <view class="goods_price_wrap">
                            <view class="goods_price">{{ item.goods_price }}</view>
                            <view class="cart_num_tool">
                                <view class="goods_num">X {{ item.num }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部工具栏 -->
        <view class="footer_tool">
            <!-- 总价格 -->
            <view class="total_price_wrap">
                <view class="total_price">
                    合计:
                    <text class="total_price_text">￥{{ totalPrice }}</text>
                </view>
                <view>包含运费</view>
            </view>
            <!-- 结算 -->
            <view class="order_pay_wrap" @click="handleOrderPay">支付（{{ totalNum }}）</view>
        </view>
    </view>
</template>

<script>
// 微信支付
// 哪些人  哪些账号  可以实现微信支付？
// 1.企业账号
// 2.企业账号的小程序后台中必须给开发者添加上白名单
//   1.一个appid可以同时绑定多个开发者
//   2.这些开发者就可以共用这个appid和它的开发权限
// 支付按钮
// 1.先判断缓存中有没有token
// 2.没有的话  跳转到授权页面  进行获取token
// 3.有token的话 创建订单  获取订单编号
// 4.已经完成了微信支付，就要手动删除缓存中已经被选中的商品，删除后的购物车数据填充回缓存，最后跳转页面
import { request } from '../../request/index.js';
import { requestPayment, showToast } from '../../utils/asyncWx';
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

export default {
    data() {
        return {
            address: {
                userName: '',
                all: '',
                telNumber: ''
            },
            // 收货地址信息数据
            cart: [],
            // 购物车缓存数据
            totalPrice: 0,
            // 总价格
            totalNum: 0 // 总数量
        };
    }
    /**
     * 生命周期函数--监听页面显示
     */,
    onShow: function () {
        // 1.获取缓存中的收货地址信息
        const address = uni.getStorageSync('address'); // 1.获取缓存中的购物车数据

        let cart = uni.getStorageSync('cart111') || []; // 过滤掉没有被勾选的商品

        cart = cart.filter((item) => item.checked);
        let totalNum = 0; // 总数量

        let totalPrice = 0; // 总价格

        cart.forEach((item) => {
            totalPrice += item.num * item.goods_price;
            totalNum += item.num;
        });
        this.setData({
            cart,
            address,
            totalPrice,
            totalNum
        }); // console.log(this.data.allChecked)

        uni.setStorageSync('cart111', cart);
        console.log(this.address);
        console.log(this.cart);
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // console.log(options)
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 支付
        async handleOrderPay(e) {
            try {
                // 判断缓存中有没有token
                const token = uni.getStorageSync('token');

                if (!token) {
                    uni.navigateTo({
                        url: '/pages/auth/index',
                        success: (result) => {},
                        fail: () => {},
                        complete: () => {}
                    });
                    return;
                }

                console.log('已经存在token'); //  创建订单(已经有token)
                // 请求头参数
                // const header111 = { Authorization: token }
                // 请求体参数

                const order_price = this.totalPrice;
                const consignee_addr = this.address.all;
                const cart = this.cart;
                let goods = [];
                cart.forEach((item) =>
                    goods.push({
                        goods_id: item.goods_id,
                        goods_number: item.goods_number,
                        goods_price: item.goods_price
                    })
                );
                const orderParams = {
                    order_price,
                    consignee_addr,
                    goods
                }; // 发送请求 创建订单 获取订单编号

                const { order_number } = await request({
                    url: '/my/orders/create',
                    data: orderParams,
                    method: 'POST'
                });
                console.log(order_number); // 发起预支付接口

                const { pay } = await request({
                    url: '/my/orders/req_unifiedorder',
                    data: {
                        order_number
                    },
                    method: 'POST'
                }); // 发起微信支付

                await requestPayment(pay); // 没必要带回调写法了 =>   const res = await requestPayment(pay)
                // 查询后台 订单状态

                const res = await request({
                    url: '/my/orders/chkOrder',
                    data: {
                        order_number
                    },
                    method: 'POST'
                });
                console.log(res);
                await showToast({
                    title: '支付成功'
                }); // 手动删除缓存中已经支付了的商品

                let newCart = uni.getStorageSync('cart111');
                newCart = newCart.filter((item) => !item.checked); // 保留没有被勾选的商品到购物车

                uni.setStorageSync('cart111', newCart); // 支付成功后跳转到订单页面

                uni.navigateTo({
                    url: '/pages/order/index',
                    success: (result) => {},
                    fail: () => {},
                    complete: () => {}
                });
            } catch (error) {
                console.log(error);
                await showToast({
                    title: '支付失败'
                });
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>
